﻿@model TeamsPortal.Web.Controllers.Models.UploadImageModel

<link href="@Url.Content("~/Content/jquery.Jcrop.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.Jcrop.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ImageUpload.js")" type="text/javascript"></script>

<form id="uploadForm" method="post" enctype="multipart/form-data" action='@Url.HttpRouteUrl("DefaultApi", new { Controller = "Image", Action = "PostAvatar" })'>
    @Html.AntiForgeryToken()
    @Html.HiddenFor(model => model.X)
    @Html.HiddenFor(model => model.Y)
    @Html.HiddenFor(model => model.Width)
    @Html.HiddenFor(model => model.Height)
    @Html.HiddenFor(model => model.RedirectUrl)
    @Html.ValidationSummary()
    <table width="100%">
        <tr>
            <td>
                @*@Html.FileFor(model => model.File)*@
                @Html.File("File")
                @*@Html.ValidationMessageFor(model => model.File)*@
                <button type="submit">Upload</button>
            </td>
            <td rowspan="2">
                <img src="@Url.Content("~/Content/empty.png")" class="uploadImage" id="target" alt="Source image" />
            </td>
        </tr>
        <tr>
            <td>
                <div class="avatarPreview">
                    <img src="@Url.Content("~/Content/empty.png")" id="preview" alt="Preview" class="jcrop-preview" />
                </div>
            </td>
        </tr>
    </table>
</form>

<script type="text/javascript">
    $(document).ready(function () {
        var ctx = $('#uploadForm');
        var target = $("#target", ctx);
        var preview = $("#preview", ctx);
        initSelect(ctx, target, preview, 100, 100);
    });
</script>